<template>
    <view class="pages" :class="themeName">
        <!-- #ifndef  H5 -->
		<custom-navbar :is-back="true" title="注册" navigation-style="default"></custom-navbar>
        <!-- #endif -->
        <view class="register">
            <view class="register-text">手机号注册</view>
            <view class="input m-t-40">
                <u-field label-width="0" v-model="register.mobile" placeholder="输入手机号" :border-bottom="false"
                    :style="{ width: '100%' }" type="number">
                    <template v-slot:icon>
                        <image class="field-left-icon" src="/static/img/Home/sj3.png"></image>
                    </template>
                </u-field>
            </view>
            <view class="input m-t-40" v-if="isRegisterCode">
                <u-field label-width="0" v-model="register.code" placeholder="短信验证码" :border-bottom="false"
                    type="number">
                    <template v-slot:icon>
                        <image class="field-left-icon" src="/static/img/Home/yzm3.png"></image>
                    </template>
                    <view slot="right">
                        <view class="sms-btn p-l-20" @tap="sendSMS">
                            <!-- 获取验证码 -->
                            <u-verification-code unique-key="login" ref="uCode" @change="codeChange">
                            </u-verification-code>
                            <view 
                                style="color:#ff8200; font-size:27rpx;" 
                                class="xs" 
                                :class="{
                                    disabled:
                                        codeTips == '获取验证码' && register.mobile.length !== 11,
                                }">
                                {{ codeTips }}
                            </view>
                        </view>
                    </view>
                </u-field>
            </view>
            <view class="input m-t-40">
                <u-field label-width="0" v-model="register.inviter_code" placeholder="好友邀请码"
                    :border-bottom="false" :style="{ width: '100%' }">
                    <template v-slot:icon>
                        <image class="field-left-icon" src="/static/img/Home/yqm.png"></image>
                    </template>
                </u-field>
            </view>
            <view class="input m-t-40">
                <u-field label-width="0" v-model="register.password" :password="!pwdShow" type="text"
                    :password-icon="false" placeholder="设置登录密码，6-20位数字、字母或字符" :border-bottom="false"
                    :style="{ width: '100%' }">
                    <template v-slot:icon>
                        <image class="field-left-icon" src="/static/img/Home/mm2.png"></image>
                    </template>
                    <view slot="right">
                        <u-icon name="eye" @click="pwdShow = !pwdShow" v-show="!pwdShow" size="36rpx">
                        </u-icon>
                        <u-icon name="eye-off" @click="pwdShow = !pwdShow" v-show="pwdShow" size="36rpx"></u-icon>
                    </view>
                </u-field>
            </view>
            <view class="input m-t-40">
                <u-field label-width="0" v-model="register.password_confirm" :password="!comfirmPwdShow" type="text"
                    :password-icon="false" placeholder="确认登录密码" :border-bottom="false" :style="{ width: '100%' }">
                    <template v-slot:icon>
                        <image class="field-left-icon" src="/static/img/Home/mm2.png"></image>
                    </template>
                    <view slot="right">
                        <u-icon name="eye" @click="comfirmPwdShow = !comfirmPwdShow" v-show="!comfirmPwdShow"
                            size="36rpx">
                        </u-icon>
                        <u-icon name="eye-off" @click="comfirmPwdShow = !comfirmPwdShow" v-show="comfirmPwdShow"
                            size="36rpx"></u-icon>
                    </view>
                </u-field>
            </view>
            <view class="m-t-40">
                <u-checkbox v-model="isAgree" :active-color="themeColor" shape="circle" :label-disabled="true">
                    <view class="sm flex">
                        已阅读并同意
                        <router-link data-theme="" to="/pagesUser/pages/server_explan/server_explan?type=1">
                        	<view class="agreement">《服务协议》</view>
                        </router-link>
                        和
                        <router-link to="/pagesUser/pages/server_explan/server_explan?type=2">
                        	<view class="agreement">《隐私协议》</view>
                        </router-link>
                    </view>
                </u-checkbox>
            </view>
            <button class="btn m-t-40 white" :class="{ disabled: isDisabled }" @tap="registerFun">
                立即注册
            </button>
			<view class="inytr">
				
				<!-- #ifdef APP -->
				<!-- 只有app才有登录功能 -->
				<view class="ypolx" @click="login">登陆</view>
				<!-- #endif -->
				
				<!-- #ifdef H5 -->
				<view class="ypolx1" @click="ppolci">立即下载APP</view>
				<!-- <view class="ypolx1" @click="wananchi">关注公众号</view> -->
				<!-- #endif -->
			</view>
			
			<!-- #ifdef H5 -->
			<view class="m-t-40" v-if="isDevelopment" @click="multipleRegisterHandler" style="padding: 30rpx;color:#000000;">
				调试模式，一键注册多个账号
			</view>
			<!-- #endif -->
			
        </view>
		<user-agreement-modal :is-agree.sync="isAgree" :visible.sync="showModel" ></user-agreement-modal>
        <u-popup v-model="registerSussuesVisible" mode="center" >
            <view class="register-susses-popup-content" >
				<image style="width: 106rpx;height:106rpx;" src="/static/img/Home/sj3.png"></image>
				<view class="tip">注册成功</view>
				<view>
					<!-- #ifdef H5 -->
					<u-button class="btn" type="primary" @click="ppolci">立即下载APP</u-button>
					<!-- #endif -->
					
					<!-- #ifndef H5 -->
					<u-button class="btn" type="primary" @click="login">立即登陆</u-button>
					<!-- #endif -->
				</view>
            </view>
        </u-popup>
		<!-- 公众号功能，暂时不需要。 2024-05-15 xjp -->
		<!-- <u-popup v-model="onShow" mode="center">
			<view class="wananchi_list">
				<view>
					长按识别关注公众号
				</view>
				<image :src="wechatQrcode"></image>
			</view>
		</u-popup> -->
    </view>
</template>

<script>
import { mapGetters } from 'vuex';
console.log("process.env", process.env)
import {
  apiAccountRegister,
  apiCheckMobile,
  apiRegisterCaptcha,
} from '@/api/app';
import { trottle } from '@/utils/tools';

export default {
    name: "register",
    data() {
        return {
            registerSussuesVisible: false,
			onShow:false,
            register: {
                mobile: "",
                code: "",
                password: "",
                password_confirm: "",
                inviter_code: ''
            },
            codeTips: "",
            isAgree: false, // 是否同意协议
            pwdShow: false,
            comfirmPwdShow: false,
            showModel: false,
			wechatQrcode: '',
			isDevelopment: false
        };
    },
    methods: {
        codeChange(tip) {
            this.codeTips = tip;
        },
		wananchi(){
			
			this.onShow = true
		},
		login() {
			uni.redirectTo({
				url:"/pages/login/login"
			});
		},
		ppolci(){
			let setting = uni.getStorageSync('self_config');
			if (setting) {
				window.location.href = setting.android_download_url;
			}
			
		},
        registerFun() {
			const vm = this
            let { mobile, password, code, inviter_code, password_confirm } = this.register;
            if (!mobile) {
                this.$toast({
                    title: "请输入手机号",
                });
                return;
            }
            if (!inviter_code) {
                this.$toast({
                    title: "请输入验证码",
                });
                return;
            }
            if (!password) {
                this.$toast({
                    title: "请输入密码",
                });
                return;
            }
            if (!password) {
                this.$toast({
                    title: "请再次输入密码",
                });
                return;
            }
            if (password != password_confirm) {
                this.$toast({
                    title: "两次密码输入不一致",
                });
                return;
            }
            if (!this.isAgree) {
                // this.$toast({ title: "请阅读并同意《服务协议》《隐私协议》" });
                this.showModel = true;
                return;
            }
            apiAccountRegister(this.register).then((res) => {
				this.$toast({
				    title: "注册成功",
				});
			   // setTimeout(() => {
				  //  this.onShow = true;
			   // }, 1000);
				// app 平台，需要用户跳到登录页面
				// #ifdef APP
				setTimeout(() => {
					vm.login()
				}, 1000)
				// #endif
				
				// h5平台，引导用户下载
				// #ifdef H5 
				this.registerSussuesVisible = true
				// #endif
				
            });
        },
        async sendSMS() {
            if (!this.$refs.uCode.canGetCode) return;
            if (!this.register.mobile) {
                this.$toast({
                    title: "请输入手机号",
                });
                return;
            }
            /**
             * @descriptionp 检测手机号是否已经注册
             */
            const { has } = await apiCheckMobile({ mobile: this.register.mobile });
            if (has === 1) {
                return this.$toast({
                    title: "手机号已被注册",
                });
            }
            apiRegisterCaptcha({
                mobile: this.register.mobile,
            })
                .then((res) => {
                    this.$refs.uCode.start();
                })
                .catch((err) => {
                    console.log(err);
                });
        },
		/**
		 * 调试模式下，一键注册多个账号
		 */
		multipleRegisterHandler() {
			const configList = []
			const vm = this
			for(let i = 0; i<=9; i++) {
				apiAccountRegister({
					...vm.register,
					mobile: `1771234567${i}`,
				})
				apiAccountRegister({
					...vm.register,
					mobile: `1371234567${i}`,
				})
			}
		},
		developmentHandler(params = {}) {
			let NODE_ENV = ''
			try{
				NODE_ENV = process.env.NODE_ENV
			}catch(e){
				NODE_ENV= ''
				//TODO handle the exception
			}
			if (NODE_ENV !== 'development') {
				
				return
			}
			this.isDevelopment = true
			const { inviter_code } = params
			this.register.inviter_code = inviter_code || 'CDZQJL'
			this.register.code = '8888'
			this.register.password = 'ces123456'
			this.register.password_confirm = 'ces123456' 
			this.isAgree = true // 是否同意协议
			this.pwdShow = true
			this.comfirmPwdShow = true
		}
    },
    computed: {
        isRegisterCode() {
            const { is_mobile_register_code } = this.appConfig;
            return is_mobile_register_code;
        },
        isDisabled() {
            //TODO
            if (this.isRegisterCode) {
                if (
                    this.register.mobile.length == 11 &&
                    this.register.code &&
                    this.register.password &&
                    this.register.password_confirm
                ) {
                    return false;
                } else {
                    return true;
                }
            } else {
                if (
                    this.register.mobile.length == 11 &&
                    this.register.password &&
                    this.register.password_confirm
                ) {
                    return false;
                } else {
                    return true;
                }
            }
        },
    },
    onLoad(e) {
		// 邀请码？如果是分享的，会带一个code, 如果不是，则检测环境。
        this.register.inviter_code = (typeof e.code != 'undefined') ? e.code : ''
		this.developmentHandler({
			inviter_code: this.register.inviter_code
		})
        this.registerFun = trottle(this.registerFun);
		this.wechatQrcode = uni.getStorageSync('self_config')['wechat_qrcode']
    },
};
</script>

<style lang="scss">
page {
    background-color: white;
    // background-image: url();
}

.wananchi_list{
	width: 500rpx;
	height: 600rpx;
	background-color: #FFFFFF;
	border-radius: 30rpx;
	text-align: center;
	position: relative;
	view{
		font-size: 38rpx;
		font-weight: bold;
		padding-top: 35rpx;
	}
	image{
		width: 300rpx;
		height: 300rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
}

.register {
    padding: 60rpx;

    &-text {
        font-size: 53rpx;
        color: #000000;
        font-weight: 700;
    }

    .input {
        border-bottom: 1px solid #cccccc;
        height: 100rpx;
        // border-radius: 12rpx;
        display: flex;
        align-items: center;
    }

    .sms-btn {
        text-align: center;
        @include font_color();
        border-left: $-solid-border;
    }

    .agreement {
        @include font_color;
    }

    .btn {
        margin-top: 40rpx;
        width: 100%;
        height: 100rpx;
        line-height: 100rpx;
        font-size: 32rpx;
        border-radius: 12rpx;
		color: #fff;
		font-weight: 700;
		background-color: #ff8200;
    }

    .disabled {
        opacity: 0.5;
    }
}

.comfirm-box {
    text-align: center;
    padding: 60rpx 0 70rpx 0;
}

.field-left-icon {
    width: 22rpx;
    height: 30rpx;
}
.inytr{
	margin-top: 40rpx;
	margin-left: 15rpx;
	display: flex;
	justify-content: space-between;
	// width: 430rpx;
	
	.ypolx{
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 26rpx;
		color: #000000;
	}
	.ypolx1{
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 22rpx;
		color: #000000;
	}
}
.register-susses-popup-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
    width: 479rpx;
    height: 414rpx;
    background: #FFFFFF;
    box-shadow: 1rpx 1rpx 0rpx 0rpx #000000, 0rpx 1rpx 2rpx 0rpx #FFFFFF, 0rpx 1rpx 2rpx 0rpx #FFFFFF;
    border-radius: 51rpx;
	.img {
		
	}
	.tip {
		
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 53rpx;
		color: #666666;
		margin: 20rpx 0 60rpx;
	}
	.btn {
		width: 217rpx;
		height: 72rpx;
		background-color: #ff8200;
		border-radius: 9999rpx;
		// opacity: 0.58;
	}
}
</style>
